<template>
    <div class="goodslist-container">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                :offset="300"
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <Goods
                    v-for="item in goodsList"
                    :key="item.id"
                    :data="item"
                    @click="handle"
                >
                    <template #footer>
                        <div class="area">
                            <div class="price">
                                <span class="yuan">&yen; 2200</span>
                                <span><s>&yen; 2500</s></span>
                            </div>
                            <div class="info">
                                <span class="buy">热卖中</span>
                                <span class="yuan">剩余60件</span>
                            </div>
                        </div>
                    </template>
                </Goods>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import { fetchGoodsList } from "@/api/index.js";
import Goods from "@/components/Goods.vue";
export default {
    data() {
        return {
            page: 0,
            limit: 8,
            goodsList: [],
            loading: false, //加载中
            finished: false, //加载完成
            refreshing: false, //刷新
        };
    },
    created() {
        // this._fetchGoodsList();
    },
    methods: {
        async _fetchGoodsList() {
            //正在刷新中则把数据清空
            if (this.refreshing) {
                this.goodsList = [];
                this.refreshing = false;
            }
            let { message } = await fetchGoodsList(this.page, this.limit);
            this.goodsList = [...this.goodsList, ...message];
            this.loading = false;
            if (message.length === 0) {
                this.goodsList.length % 2 === 1 && this.goodsList.pop();
                this.finished = true;
            }
        },
        handle(data, event) {
            this.$router.push("/goodsdetail/" + data.id);
        },
        onLoad() {
            console.log("默认onLoad会加载一次");
            this.page++;
            this._fetchGoodsList();
        },
        onRefresh() {
            console.log("onRefresh刷新");
            this.page = 0;
            // 清空列表数据
            this.finished = false;
            // loading = ture,加载状态
            this.loading = true;
            this.onLoad();
        },
    },
    components: {
        Goods,
    },
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/var.scss";
.goodslist-container {
    display: flex;
    flex-wrap: wrap;
    padding: 2px;
    justify-content: space-around;
    background: $bgColor;
    .van-list {
        display: flex;
        flex-wrap: wrap;
        .item {
            box-shadow: 0 0 2px #ccc;
        }
        ::v-deep.van-list__finished-text {
            text-align: center;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    .area {
        color: #787272;
        .price {
            display: flex;
            justify-content: space-between;
            .yuan {
                color: red;
                font-size: 16px;
                font-weight: 700;
            }

            .buy {
                font-size: 16px;
                color: #999;
                text-decoration: line-through;
            }
        }
        .info {
            display: flex;
            justify-content: space-between;
            .yuan {
                color: red;
                font-size: 16px;
                // font-weight: 700;
            }

            .buy {
                font-size: 16px;
                color: orangered;
            }
        }
    }
}
</style>
